<template>
	<TabGrayBarCard
		title="出租分析"
		:secondTitle="{ text: `（${rentType[props.leaseType].title}）` }"
		@onMore="goDetail(props.permi)"
		:tabs="card.tabs"
		:curTab="card.curTab"
		:tabRight="card.tabRight"
		@onChange="changeTab"
		:grayCardList="card.grayCardList"
		:echartId="`myEChartsBar-${props.permi}-newSigning`"
		:echartData="card.echartData"
		:lineText="''"
		:barText="'出租率'"
		:unitText="``"
		:updateText="card.updateText"
		v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }"
	>
	</TabGrayBarCard>
</template>

<script setup>
	import TabGrayBarCard from '@/DbComponents/tabGrayBarCard';
	import { toThousands } from '@/utils/number-util';
	import dashBoardApi from '@/api/Manage/Business/dashBoard';
	import { reactive, watch } from 'vue';
	import { reportLog } from '@/utils/reportLog';
	import { useRouter } from 'vue-router';

	const props = defineProps({
		permi: {
			type: String,
			required: false,
			default: '',
		},
		hideList: {
			type: Array,
			required: false,
		},
		biProjectCode: {
			type: String,
			required: false,
			default: '',
		},
		biProjectName: {
			type: String,
			required: false,
			default: '',
		},
		updateDate: {
			type: String,
			required: false,
			default: '',
		},
		leaseType: {
			type: String,
			required: true,
			default: 'warehouse',
		},
	});

	const router = new useRouter();

	const rentType = {
		zhongdao: { title: '中岛位', type: '中岛位' },
		warehouse: { title: '库房', type: '库房' },
		place: { title: '场地', type: '场地' },
		ad: { title: '广告位', type: '广告位' },
	};

	watch(
		() => props.biProjectCode,
		() => {
			getCardData();
			getChartData();
		},
		{ immediate: true },
	);

	const card = reactive({
		tabs: [{ label: '时点', value: '时' }],
		curTab: '时',
		tabRight: '',
		grayCardList: [
			{ label: '租赁面积', value: '', unit: 'm²', color: '' },
			{ label: '已出租面积', value: '', unit: 'm²', color: '' },
			{ label: '出租率', value: '', unit: '%', color: '' },
		],
		unitText: '',
		updateText: '',
		echartData: {},
		startDate: '',
		endDate: '',
	});

	async function getCardData() {
		let res = await dashBoardApi.leaseCardApi(props.biProjectCode, rentType[props.leaseType].type, props.updateDate);
		if (res.data.code !== 200) return;
		card.tabRight = res.data.data.dateStr;
		card.grayCardList[0].value = res.data.data.total ? toThousands(res.data.data.total) : '';
		card.grayCardList[1].value = res.data.data.rent ? toThousands(res.data.data.rent) : '';
		card.grayCardList[2].value = res.data.data.rentalRate1 ? toThousands(res.data.data.rentalRate1) : '';
	}

	async function getChartData() {
		let res = await dashBoardApi.leaseChartApi(props.biProjectCode, rentType[props.leaseType].type, props.updateDate);
		if (res.data.code !== 200) return;
		res.data.data.min = 0;
		res.data.data.max = 100;
		card.echartData = res.data.data;
	}

	const goDetail = permi => {
		reportLog({
			type: 4,
			resourceKey: permi,
		});
		router.push({
			path: '/page/routeController/index',
			query: {
				rid: 'Manage_Business_Energy_LeaseAnalyse',
				rTitle: `出租分析-${rentType[props.leaseType].title}`,
				leaseType: props.leaseType,
				biProjectCode: props.biProjectCode,
				biProjectName: props.biProjectName,
				updateDate: props.updateDate,
			},
		});
	};

	const initData = () => {
		if (props.leaseType == 'ad') {
			card.grayCardList[0] = { label: '资产总数', value: '', unit: '个', color: '' };
			card.grayCardList[1] = { label: '已出租个数', value: '', unit: '个', color: '' };
		}
	};

	const changeTab = value => {
		console.log(value);
		getCardData();
		getChartData();
	};

	initData();
</script>
